<template>
  <div>
     <el-row :gutter="20">

      <el-col :span="4" :xs="24" >
        <!-- <div class="head-container">
          <el-input v-model="deptName" placeholder="请输入防区名称" clearable prefix-icon="el-icon-search" style="margin-bottom: 20px" />
        </div> -->
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="{ label: 'label', children: 'children' }"
            node-key="id"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
    
          />
        </div>
      </el-col>
    

      <el-col :lg="20" :xm="24">
     
      <el-form :model="queryParams" label-position="right" inline ref="queryRef" v-show="showSearch" @submit.prevent style="text-align: left;">

        <el-form-item label="报警时间">
          <el-date-picker
             v-model="dateRangeAddTime"
            style="width: 340px"
            placeholder="请选择添加时间"
            value-format="YYYY-MM-DD HH:mm:ss"          
            type="datetimerange"
            range-separator="-"
            start-placeholder="Start date"
            end-placeholder="End date"      
            >   
          </el-date-picker>
        </el-form-item>

        <el-form-item label="相机IP" prop="ip">
            <el-input v-model="queryParams.ip" placeholder="请输入相机IP" clearable style="width: 240px"
              @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
            <el-button icon="search" type="primary" @click="handleQuery" >查询</el-button>
        </el-form-item>

         <el-form-item>
            <el-button type="primary" @click="submitWith" >一键处理</el-button>
        </el-form-item>
      </el-form>

    
      <el-table v-loading="loading"  :data="dataList" border stripe header-cell-class-name="el-table-header-cell" highlight-current-row 
      @selection-change="handleSelectionChange" >
        <el-table-column type="selection" :selectable="selectable" width="55" />
        <el-table-column prop="id" label="编号" width="120" align="center" fixed  />
        <el-table-column prop="areaName" label="防区名称" width="180" align="center"  />
        <el-table-column prop="dateTime" label="报警时间" width="180" align="center" />
        <el-table-column prop="cameraIp" label="相机地址" width="120" align="center" />
        <el-table-column prop="level" label="报警等级" width="120" align="center" />
        <el-table-column prop="dealWith" label="是否处理" width="120" align="center" />       
        <el-table-column prop="videoName" label="录像地址"   align="center" :show-overflow-tooltip="true" />
        
      </el-table>
      
      <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
			@pagination="getList" />

        </el-col>
       </el-row>
  
      <!-- 添加或修改对话框 -->
      <el-dialog :title="title" v-model="open" append-to-body>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
          <el-row :gutter="20">
  
            <el-col :lg="12" v-if="opertype != 1">
              <el-form-item label="编号" prop="id">
                <el-input-number v-model.number="form.id" controls-position="right" placeholder="请输入编号"
                  :disabled="true" />
              </el-form-item>
            </el-col>
            <el-col :lg="12">
              <el-form-item label="IP" prop="ip">
                <el-input v-model="form.ip" placeholder="请输入IP" />
              </el-form-item>
            </el-col>
            <el-col :lg="12">
              <el-form-item label="端口" prop="port">
                <el-input v-model.number="form.port" placeholder="请输入端口" />
              </el-form-item>
            </el-col>
            <el-col :lg="12">
              <el-form-item label="北偏角" prop="northDeviationAngle">
                <el-input v-model="form.northDeviationAngle" placeholder="请输入北偏角" />
              </el-form-item>
            </el-col>
            <el-col :lg="12">
              <el-form-item label="纬度" prop="latitude">
                <el-input v-model="form.latitude" placeholder="请输入纬度" />
              </el-form-item>
            </el-col>
            <el-col :lg="12">
              <el-form-item label="经度" prop="longitude">
                <el-input v-model="form.longitude" placeholder="请输入经度" />
              </el-form-item>
            </el-col>
            <el-col :lg="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)">{{
                  dict.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          </el-row>
        </el-form>
        <template #footer v-if="opertype != 3">
          <el-button text @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
<script setup>
  import { listAlarm,updateAlarm } from '@/api/alarm/alarm_index'
  import {treeselect}from '@/api/device/defencearea.js'

  const deptOptions = ref(undefined)

  // 日期范围

  const dateRangeAddTime = ref<[Date, Date]>([
    new Date(2000, 10, 10, 10, 10),
    new Date(2000, 10, 11, 10, 10),
  ])

  const ids=ref([])
  const single = ref(true)
  const multiple = ref(true)
  const { proxy } = getCurrentInstance()

  // 遮罩层
  const loading= ref(true)
  // 显示搜索条件
  const showSearch= ref(true)
  // 总条数
  const total= ref(0)
  // 表格数据
  const dataList=ref([])
  // 弹出层标题
  const title= ref('')
  // 是否显示弹出层
  const open= ref(false)
  // 查询参数
  const  queryParams=ref({
    pageNum: 1,
    pageSize: 15,
    sort: 'id',
    sortType: 'asc',
    ip: undefined,
    areaId:'',
    // dateRangeAddTime : ref<[Date, Date]>([
    // new Date(2000, 10, 10, 10, 10),
    // new Date(2000, 10, 11, 10, 10),
    //])
  })
  // 表单参数
  const form= ref({})


  getTreeselect();
  getList();

  function getTreeselect() {
    treeselect().then((response) => {
      deptOptions.value = response.data.data
    })
  }
  
  function getList() {
      loading.value = true
      listAlarm(queryParams.value).then(res => {
        const { code, data } = res.data
          
        if (code == 200) {
          dataList.value = data.result;
          total.value = data.totalNum;
          loading.value = false;
        }
      })
    }
  function cancel() {
      open = false
      reset()
    }
    // 表单重置
  function reset() {
      this.form = {
        id: undefined,
        bindingAreaId: -1,
        ip: null,
        port: '',
        status:'1',
        latitude: 0,
        longitude: 0,
        northDeviationAngle: 0
      }
      this.resetForm('formRef')
  }
  const handleQuery=()=> {
      queryParams.pageNum = 1
      getList()
  }
  function resetQuery() {
      resetForm('queryForm')
      handleQuery()
  }
  function handleSelectionChange(selection) {
      ids.value = selection.map((item) => item.id)
      single.value = selection.length != 1
      multiple.value = !selection.length
  }
  function handleNodeClick(data) {
    queryParams.value.areaId = data.id
    handleQuery()
  }

const submitWith=(row)=>{
  const Ids = row.id || ids.value

  updateAlarm(Ids).then(() => {
    getList()
    proxy.$modal.msgSuccess("选中项已处理")

  })
}



  

</script>
  